<template>
  <el-container>
    <el-main>
      <el-row>
        <el-card style="padding:0;width: 98%;height:300px;margin-left:1%;margin-bottom: 20px;background-color: rgb(6,31,51);border: 0">
          <el-col :span="18">
            <!--            <el-card style="width: 100%;height:270px;padding: 0;overflow-y: scroll;" class="tablecardstyle">-->
            <el-card style="width: 100%;height:250px;padding: 0;overflow-y: scroll;background-color: rgb(7,39,46)" class="tablecardstyle">
              <el-table
                :data="tabledata"
                style="width: 95%"
                :show-header="true"
              >
                <el-table-column
                  label="事件ID"
                  prop="id"
                  align="center"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="诊断发生时间"
                  prop="time"
                  align="center"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="诊断部件"
                  prop="faultposition"
                  align="center"
                  show-overflow-tooltip
                />

                <el-table-column
                  label="诊断描述"
                  prop="description"
                  align="center"
                  show-overflow-tooltip
                />
                <!--                <el-table-column
                  label="设备品牌"
                  prop="brand"
                  align="center"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="设备型号"
                  prop="model"
                  align="center"
                  show-overflow-tooltip
                />-->
                <el-table-column
                  label="故障级别"
                  prop="faultlevel"
                  align="center"
                  show-overflow-tooltip
                />

                <el-table-column
                  label="操作"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button style="margin: 0;border:0" type="text" size="small" @click="tablehandleClick(scope.row)">查询相似案例</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <el-pagination
              style=""
              :small="true"
              :page-size="casetable.pageSize"
              :pager-count="5"
              background
              :current-page="casetable.pageCurrent"
              layout="prev, pager, next"
              :total="caseitemtotal"
              @current-change="handleCurrentChange"
            />
          </el-col>

          <el-col :span="6">
            <el-row style="margin-bottom: 7%">
              <!--              <span style="color: #FFFFFF">诊断部件</span>
              <el-select v-model="sevalue0" placeholder="请选择">
                <el-option
                  v-for="item in value0"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>-->

              <span style="color:#fff">诊断部件</span>
              <el-cascader
                ref="componeCascader"
                :options="value0"
                popper-class="casepc-sel-area-cascader"
                expand-trigger="hover"
                :props="props"
                collapse-tags
                style="width:50%"
                placeholder="请选择诊断部件"
                clearable
                @change="changeposition"
              />
            </el-row>

            <el-row style="margin-bottom:7%">
              <!--              <span style="color: #FFFFFF">诊断类型</span>
              <el-select v-model="sevalue1" placeholder="请选择">
                <el-option
                  v-for="item in value1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>-->

              <span style="color:#fff">诊断类型</span>
              <el-cascader
                ref="componeCascader"
                v-model="typeshowdata"
                :options="value1"
                popper-class="casepc-sel-area-cascader"
                expand-trigger="hover"
                :props="propsf"
                collapse-tags
                style="width:50%"
                placeholder="请选择诊断类型"
                clearable
                @change="changetype"
              />
            </el-row>

            <el-row>
              <!--              <span style="color: #FFFFFF">故障级别</span>
              <el-select v-model="sevalue2" placeholder="请选择">
                <el-option
                  v-for="item in value2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>-->

              <span style="color:#fff">故障级别</span>
              <el-cascader
                ref="componeCascader"
                :options="value2"
                popper-class="casepc-sel-area-cascader"
                expand-trigger="hover"
                :props="propsf"
                collapse-tags
                style="width:50%"
                placeholder="请选择故障级别"
                clearable
                @change="changelevel"
              />
            </el-row>

            <el-row>
              <el-button style="margin-top:6%" @click="searchcase">查询</el-button>
            </el-row>

          </el-col>
        </el-card>
      </el-row>
      <el-row>
        <el-card style="width: 98%;height:400px;margin-left:1%;background-color: rgb(6,31,51)">
          <el-row>
            <img :src="bgleftimg" style="margin-right: 1%">
            <span style="color: #ffffff">推荐检测指标</span>
            <img :src="bgrightimg" style="margin-left: 1%">
          </el-row>
          <el-row style="text-align:left;margin-left:3%;margin-top: 1%;margin-bottom: 1%">
            <span style="color: #ffffff;margin-right:82.8%;margin-left: 0">相似案例</span>
            <!--            <el-button-group >
                          <el-button style="margin-top: 0;margin-bottom: 2%;height:80%">故障</el-button>
                          <el-button style="margin-top: 0;margin-bottom: 2%;height:80%">缺陷</el-button>
                        </el-button-group>-->
            <!--            <el-radio-group v-model="casebutton"  fill="#053356">
              <el-radio-button  label='故障'>故障</el-radio-button>
              <el-radio-button  label='缺陷'>缺陷</el-radio-button>
            </el-radio-group>-->
          </el-row>
          <el-card style="margin: 0 3%;height:250px;background-color:rgb(6,31,51);border: 2px solid rgb(0,147,231);text-align: left">
            <el-row>
              <el-col :span="6">
                <span style="color: rgb(6,203,255)">故障类型：{{ similarCase.故障类型 }}</span>
              </el-col>
              <el-col :span="8">
                <span style="color: rgb(6,203,255)">故障部件：{{ similarCase.故障部件 }}</span>
              </el-col>
              <el-col :span="6">
                <span style="color: rgb(6,203,255)">故障设备型号：{{ similarCase.设备型号 }}</span>
              </el-col>
              <el-col :span="2">
                <span style="color: rgb(6,203,255)">是否停电：{{ similarCase.是否停电 }}</span>
              </el-col>
              <el-col :span="2">
                <span style="color: rgb(6,203,255)">相似度：{{ similarCase.相似度 }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 1%">
              <span style="color: rgb(6,203,255)">情况描述：{{ similarCase.情况描述 }}</span>
            </el-row>
            <el-row style="margin-top: 1%">
              <span style="color: rgb(6,203,255)">原因分析：{{ similarCase.原因分析 }}</span>
            </el-row>
            <el-row style="margin-top: 1%">
              <span style="color: rgb(6,203,255)">解决措施：{{ similarCase.解决措施 }}</span>
            </el-row>

          </el-card>
        </el-card>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
import { gethistoryFault, getsimilarCase } from '@/api/maincase'
export default {
  name: 'Maincase',
  data() {
    return {
      sevalue0: [],
      sevalue1: [],
      sevalue2: [],
      value0: [{ value: 1, label: '阀TCE' }, { value: 2, label: '阀阻尼电容' }, { value: 3, label: '阀均压电阻' }, { value: 4, label: '阀电抗器' }, { value: 5, label: '光纤' }, { value: 6, label: '电极状态/内冷水质' }, { value: 7, label: '阀控板卡' }, { value: 8, label: '晶闸管' }],
      value1: [{ value: '1', label: '阀跳闸故障' }, { value: '2', label: '阀晶闸管故障' }, { value: '3', label: '阀BOD故障' }, { value: '4', label: '阀漏水告警' }, { value: '5', label: '阀避雷器告警' }, { value: '6', label: '阀控故障' }],
      value2: [{ value: '1', label: '警告' }, { value: '2', label: '紧急' }],
      bgleftimg: require('@/assets/img/titleleft.png'),
      bgrightimg: require('@/assets/img/titleright.png'),
      casebutton: '故障',
      caseitemtotal: 0,
      props: { multiple: true },
      propsf: { multiple: false },
      typeshowdata: [],
      typetralate: [],
      similardata: {
        eventId: '',
        time: ''
      },
      casetable: {
        valvehallId: 1,
        pageCurrent: 1,
        pageSize: 4,
        faulttypeId: '',
        faultPosition: '',
        faultLevel: ''
      },
      tabledata: [
        {
          time: '2022',
          faultposition: '阀',
          id: 'asd',
          description: '损坏',
          faultlevel: '一般'
        },
        {
          time: '2022',
          faultposition: '阀',
          id: 'asd',
          description: '损坏',
          faultlevel: '一般'
        },
        {
          time: '2022',
          faultposition: '阀',
          id: 'asd',
          description: '损坏',
          faultlevel: '一般'
        }, {
          time: '2022',
          faultposition: '阀',
          id: 'asd',
          description: '损坏',
          faultlevel: '一般'
        }

      ],
      similarCase: {
        '故障部件': '',
        '原因分析': '',
        '是否停电': '',
        '故障类型': '',
        '设备型号': '',
        '相似度': '',
        '情况描述': '',
        '解决措施': ''
      }
    }
  },

  watch: {
    '$route.params': {
      handler(new_value, old_value) {
        this.casetable.valvehallId = this.$route.params.id
        this.getcasetabledata()
        // 台账
      }
    }
  },

  created() {
    this.getcasetabledata()
  },
  methods: {
    getcasetabledata() {
      gethistoryFault(this.casetable).then(response => {
        /* console.log('ceshi', response)*/
        this.caseitemtotal = response.data.total
        this.tabledata = []
        this.tabledata = response.data.records
      })
    },

    changeposition(value) {
      this.casetable.faultPosition = value.toString()
      // console.log(this.$refs.componeCascader.getCheckedNodes())
    },

    changetype(value) {
      this.casetable.faulttypeId = value.toString()
      // console.log(this.$refs.componeCascader.getCheckedNodes())
      /* if(this.typeshowdata.length==2){
        this.typetralate=[]
        this.typetralate=this.typeshowdata
        this.typeshowdata=[]
        this.typeshowdata=this.typetralate[1]
      }*/
    },

    changelevel(value) {
      this.casetable.faultLevel = value.toString()
      // console.log(this.$refs.componeCascader.getCheckedNodes())
    },

    handleCurrentChange(current) {
      this.casetable.pageCurrent = current
    },

    searchcase() {
      this.getcasetabledata()
    },

    tablehandleClick(row) {
      // console.log('第一次显示', row)
      getsimilarCase(row.id, row.time).then(res => {
        // console.log(res)
        this.similarCase = res.data
      })
    }

  }
}
</script>
<style lang="scss">
.casepc-sel-area-cascader{
    background-color: #061F33;
    width: 12% !important;
    /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
    .popper__arrow,
    .popper__arrow::after {
    display: none;
    }
    .el-cascader__dropdown {
     /*选择器面板边框及圆角设置*/
    border-radius: 12px;
    border: 1px solid #1e6abc !important;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07);
    }
    .el-cascader-node:hover{
    background-color: #0a4E7D;
    width: 200%;
    }
    .el-cascader-node{
    color: #fff;
    }
    .el-cascader-node:focus {
    /*设置选中节点，鼠标移开的样式 */
    background-color: transparent ;
    }
    .el-cascader-node__label{
    width: 400px;
    }
  }
</style>

<style lang="scss" scoped>
/*.pc-sel-area-cascader{
  background-color: #061F33;
  width: 12% !important;
  !* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) *!
  .popper__arrow,
  .popper__arrow::after {
    display: none;
  }
  ::v-deep .el-cascader__dropdown {
    // 选择器面板边框及圆角设置
    border-radius: 12px;
    border: 1px solid #1e6abc;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07);
  }
  .el-cascader-node:hover{
    background-color: #0a4E7D;
    width: 200%;
  }
  .el-cascader-node{
    color: #fff;
  }
  .el-cascader-node:focus {
    !*设置选中节点，鼠标移开的样式 *!
    background-color: transparent ;
  }
  .el-cascader-node__label{
    width: 400px;
  }
}*/
::v-deep .casepc-sel-area-cascader .el-cascader__dropdown{
  border: 2px solid #1e6abc !important;
}

/*调整el-select选框样式*/
::v-deep .el-input--suffix .el-input__inner{
  background-color: #061F33 ;
  border: 1px solid #1e6abc ;
  color: #FFFFFF;
}

.el-card{
  border: 0;
}
/*调整表头格式*/
::v-deep.el-table th{
  background-color: rgb(16,70,98);
  color: rgb(6,203,255);
  border: 0;
}

/*调整表格格式*/
::v-deep.el-table td{
  /*background-color: rgb(7,39,46);*/
  background-color:rgb(7,45,69);
  color:#FFFFFF;
  border-right: 1px solid rgb(16,70,98);
  border-bottom: 1px solid rgb(16,70,98);
  border-left:1px solid rgb(16,70,98) ;
}

/*调整表格所在card样式*/
::v-deep.tablecardstyle{
  .el-card__body{
    padding:0;
    border: 0;
    margin-bottom: 0;
    background-color: rgb(6,31,51);
  }
  .el-card{
    margin-top: 0;
  }
}

/*设置表格悬停变色*/
::v-deep .el-table tbody tr:hover>td {
  background-color:rgb(7,39,46)!important;
}

/*设置滚动条轨道宽度，背景颜色*/
::v-deep ::-webkit-scrollbar {
  width: 10px;
  background-color: #000000;
}

/*设置滑块颜色，形状*/
::v-deep ::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #072D45;
}
/*::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
  width: 10px;
}*/

/*::v-deep .el-table--scrollable-y ::-webkit-scrollbar {
  display: none;
}*/
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
.el-table::before {
  height: 0;
  background-color: transparent;
}

.el-button{
  border: 2px solid rgb(0,147,231);
  color: rgb(6,203,255);
  margin: 0;
}

/*按钮悬浮样式*/
.el-button:hover{
  color: #FFFFFF;
}

/*按钮选中还未松开样式*/
.el-button:active{
  color: #FFFFFF;
}

/*修改故障缺陷按钮颜色*/
::v-deep .el-radio-button__inner{
  border: 2px solid rgb(0,147,231);
  color: rgb(6,203,255);
  background-color: #053356;
  margin-bottom: 3%;
  padding: 10px 20px;
}

/*修改故障缺陷按钮边框白边*/
::v-deep .el-radio-button:first-child .el-radio-button__inner{
  border-left: 2px solid rgb(0,147,231) !important;
}

/*设置故障缺陷按钮点击后颜色*/
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  border: 2px solid rgb(0,147,231) !important;
}

::v-deep .el-input__inner:hover{
  border-color: #0d4fcf;
}
::v-deep .el-input__suffix:hover{
  border-color: #0d4fcf;
}
</style>

